<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .content {
      margin: 150px auto;
      width: 900px;
    }

  </style>
</head>
<body>
  <div id="app" class="content">    
    
    <!-- li插入 -->
    <div id="test1">
      <span v-for="(item, index) in items">
        {{index}} - {{item}}
      </span>
    </div>
    <button @click="addLi">使用vue.js新增2000条li</button>
    <button @click="updateLi">使用vue.js更新2000条li</button>

    <div id="test2">
      
    </div>
    <button id="jqAddLi" onclick="jqAddLi()">使用jq新增2000条li</button> 
    <button id="jqUpdateLi" onclick="jqUpdateLi()">使用jq更新2000条li</button> 
  </div>

  <script src="../js/lib/vue.js"></script>
  <script src="../js/lib/art-template.js"></script>
  <script src="../js/lib/jquery-2.1.1.js"></script>
  <script>
    var liArr;
    var reLiArr;
    var app = new Vue({
      el: "#app",
      data: {
        items: []
      },
      methods: {
        addLi: function() {
          var startTime = new Date();
          this.items = liArr;
          var endTime = new Date();
          
        },
        updateLi: function() {
          var startTime = new Date();
          this.items.reverse();
          var endTime = new Date();
        }
      }   
    });

    var jqAddLi = function() {
      $.each(liArr, function(index, item) {
        $('#test2').append('<span>'+index+' - '+item+'</option>');
      });
    }

    var jqUpdateLi = function() {
      $('#test2').children().remove();
      $.each(liArr.reverse(), function(index, item) {
        $('#test2').append('<span>'+index+' - '+item+'</option>');
      });
    }

    $.getJSON('../js/data/lis.json', function(lis) {       
      liArr = lis.lis;     
      liArr = liArr.concat(liArr); 
      liArr = liArr.concat(liArr); 
      liArr = liArr.concat(liArr); 
      liArr = liArr.concat(liArr); 
      console.log(liArr.length);
    });


  </script>
</body>
</html>